import { connect } from "react-redux";
import { Foot } from './../components/Footer/foot';
import '../css/My.scss';
import { Link } from 'react-router-dom';
import { setCookie, getCookie } from '../js/cookie';
import { getUser } from "../action/action"
import { Popover, Icon, NavBar, Toast } from 'antd-mobile';
import { PullToRefresh } from 'antd-mobile';
const Item = Popover.Item;

@connect(
    (state) => {
        return {
            footList: state.home.footList,
            userData: state.my.userData
        }
    }
)
export class My extends React.Component {
    state = {
        visible: false,
        selected: '',
        refreshing: false,
        down: true,
        height: document.documentElement.clientHeight,
        data: [],
    };
    like() {
        if (getCookie("ky_uid")) {
            let { history } = this.props;
            history.push("/myLike");
        } else {
            Toast.info("未登录,请先登录", 1)
        }
    }
    attention() {
        if (getCookie("ky_uid")) {
            let { history } = this.props;
            history.push("/myAttention");
        } else {
            Toast.info("未登录,请先登录", 1)
        }
    }
    onSelect = (opt) => {
        this.setState({
            visible: false,
            selected: opt.props.value,
        });
        if (opt.props.value == "logout") {
            setCookie("ky_uid", "", -7);
            let { dispatch } = this.props;
            dispatch(getUser(getCookie("ky_uid"), (data) => { }));
        }
    };
    handleVisibleChange = (visible) => {
        this.setState({
            visible,
        });
    };
    componentDidMount() {
        if (getCookie("ky_uid")) {
            let { dispatch } = this.props;
            dispatch(getUser(getCookie("ky_uid"), (data) => { }));
        }
    }
    setURL() {
        setCookie("ky_history_url", this.props.match.url, 7);
    }
    render() {
        let { footList, userData } = this.props;
        let nav = null;
        if (userData) {
            nav = (
                <NavBar
                    mode="light"
                    rightContent={
                        <Popover mask
                            overlayClassName="fortest"
                            overlayStyle={{ color: 'currentColor' }}
                            visible={this.state.visible}
                            overlay={[
                                (<Item key="1" value="logout" data-seed="logId">退出登录</Item>),
                            ]}
                            align={{
                                overflow: { adjustY: 0, adjustX: 0 },
                                offset: [-10, 0],
                            }}
                            onVisibleChange={this.handleVisibleChange}
                            onSelect={this.onSelect}
                        >
                            <div style={{
                                height: '100%',
                                padding: '0 15px',
                                marginRight: '-15px',
                                display: 'flex',
                                alignItems: 'center',
                            }}
                            >
                                <Icon type="ellipsis" />
                            </div>
                        </Popover>
                    }
                >
                </NavBar>
            )
        }
        return (

            <div className="box">
                <header>
                    {nav}
                </header>
                <PullToRefresh
                    damping={60}
                    ref={el => this.ptr = el}
                    style={{
                        height: this.state.height,
                        overflow: 'auto',
                    }}
                    indicator={this.state.down ? {} : { deactivate: '下拉可以刷新' }}
                    direction={this.state.down ? 'down' : 'up'}
                    refreshing={this.state.refreshing}
                    onRefresh={() => {
                        this.setState({ refreshing: true });
                        setTimeout(() => {
                            location.reload()
                            this.setState({ refreshing: false });
                        }, 1000);
                    }}
                >
                    <main>
                        <div className="head-port">
                            <div>
                                <Link to={"/login"} onClick={() => this.setURL()}><i className="iconfont icon-kaiyan-copy-copy"></i></Link>
                            </div>
                            <h3>{userData ? userData.result.utel : "未登录,请先登录"}</h3>
                            <div>
                                <div onClick={() => this.like()}><i className="iconfont icon-xihuan2"></i>喜欢</div>
                                <div onClick={() => this.attention()} > <i className="iconfont icon-attention"></i>关注</div>
                            </div>
                        </div>
                    </main>
                </PullToRefresh>
                <footer><Foot footList={footList} /></footer>
            </div>
        )
    }
}
